<template>
  <div class="select-tree-component">
    <FormItemView :selecting="selecting" :value="cycleDesc" @click="handleOpen" />
    <cycle-template-input ref="CycleTemplateInputRef" @close="selecting = false" />
  </div>
</template>

<script>
import CycleTemplateInput from './template'
import FormItemView from '@/components/FormItemView/index'
export default {
  name: 'CycleTemplateView',
  components: { CycleTemplateInput, FormItemView },
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    optionList: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    title: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selecting: false
    }
  },
  computed: {

    cycleDesc: function() {
      const { cycleType, cycleParams } = this.$props.value
      if (!cycleType) {
        return ''
      }
      if (cycleType === 1) {
        return '每天持续检查'
      }
      if (cycleType === 2) {
        return '每周 ' + cycleParams + ' 检查'
      }
      if (cycleType === 3) {
        return '每月第' + cycleParams + '天检查'
      }
      if (cycleType === 4) {
        return '每季第' + cycleParams + '天检查'
      }
      if (cycleType === 5) {
        return '每年第' + cycleParams + '天检查'
      }
      return ''
    }
  },
  methods: {
    handleOpen() {
      this.$data.selecting = true
      const _value = this.$props.value
      this.$refs.CycleTemplateInputRef.open(_value).then(res => {
        this.$emit('input', res)
        this.$emit('change', res)
        this.$data.selecting = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
